<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.lineCap = 'round';

        // Central coordinates
        const cx = 230;
        const cy = 220;

        // Draw the large circular wire (as an ellipse for perspective)
        const R_x = 110;
        const R_y = 170;
        ctx.beginPath();
        ctx.ellipse(cx, cy, R_x, R_y, 0, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw the small sphere
        const a_radius = 35;
        ctx.beginPath();
        ctx.arc(cx, cy, a_radius, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw the two intersecting lines at the center, forming a cross.
        // One line extends to the outer loop to indicate radius R.
        const mainLineAngle = -Math.PI * 0.68; // Angled to the bottom-left
        const secondLineAngle = mainLineAngle + Math.PI / 2;

        // Find the intersection point of the main line with the ellipse
        const r_on_ellipse = 1 / Math.sqrt(Math.pow(Math.cos(mainLineAngle) / R_x, 2) + Math.pow(Math.sin(mainLineAngle) / R_y, 2));
        const mainLineEnd_x = cx + r_on_ellipse * Math.cos(mainLineAngle);
        const mainLineEnd_y = cy + r_on_ellipse * Math.sin(mainLineAngle);

        // Draw main line for R and a
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(mainLineEnd_x, mainLineEnd_y);
        ctx.stroke();

        // Draw the second intersecting line (contained within the small sphere)
        const secondLine_p1_x = cx + a_radius * Math.cos(secondLineAngle);
        const secondLine_p1_y = cy + a_radius * Math.sin(secondLineAngle);
        const secondLine_p2_x = cx - a_radius * Math.cos(secondLineAngle);
        const secondLine_p2_y = cy - a_radius * Math.sin(secondLineAngle);
        ctx.beginPath();
        ctx.moveTo(secondLine_p1_x, secondLine_p1_y);
        ctx.lineTo(secondLine_p2_x, secondLine_p2_y);
        ctx.stroke();


        // Helper function to draw arrows
        function drawArrow(fromx, fromy, tox, toy, options = {}) {
            const { headlen = 10, fill = true } = options;
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            
            // Line part
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();

            // Arrowhead
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            if(fill) {
                 ctx.fill();
            }
            ctx.stroke();
        }

        // Draw z-axis and B0 vector
        const z_end_x = cx + 220;
        drawArrow(cx, cy, z_end_x, cy);
        ctx.fillText('z', z_end_x + 8, cy + 8);

        const b0_end_x = cx + 85;
        ctx.save();
        ctx.lineWidth = 4;
        drawArrow(cx, cy, b0_end_x, cy, { headlen: 12 });
        ctx.restore();
        ctx.fillText('B', b0_end_x + 5, cy + 28);
        ctx.save();
        ctx.font = 'italic 16px "Times New Roman"';
        ctx.fillText('0', b0_end_x + 16, cy + 32);
        ctx.restore();


        // Draw r and n vectors
        const theta_angle = -Math.PI / 3.5; // ~51 degrees clockwise
        const r_len = 110;
        const r_end_x = cx + r_len * Math.cos(theta_angle);
        const r_end_y = cy + r_len * Math.sin(theta_angle);
        drawArrow(cx, cy, r_end_x, r_end_y, {fill: false}); // The original r arrow is not filled
        ctx.fillText('r', r_end_x + 10, r_end_y - 2);

        const n_len = 55;
        const n_angle = theta_angle - Math.PI / 2; // Perpendicular
        const n_end_x = cx + n_len * Math.cos(n_angle);
        const n_end_y = cy + n_len * Math.sin(n_angle);
        drawArrow(cx, cy, n_end_x, n_end_y, {fill: false}); // The original n arrow is not filled
        ctx.fillText('n', n_end_x, n_end_y - 12);

        // Draw angle arc for theta
        const arc_radius = 45;
        ctx.beginPath();
        ctx.arc(cx, cy, arc_radius, 0, theta_angle, true);
        ctx.stroke();
        const theta_label_x = cx + (arc_radius + 15) * Math.cos(theta_angle / 2);
        const theta_label_y = cy + (arc_radius + 15) * Math.sin(theta_angle / 2);
        ctx.fillText('θ', theta_label_x - 10, theta_label_y + 10);

        // Add labels for a and R
        const a_label_pos_r = a_radius * 0.5;
        const a_label_x = cx + a_label_pos_r * Math.cos(mainLineAngle);
        const a_label_y = cy + a_label_pos_r * Math.sin(mainLineAngle);
        ctx.fillText('a', a_label_x - 25, a_label_y);

        const R_label_pos_r = (r_on_ellipse + a_radius) / 2;
        const R_label_x = cx + R_label_pos_r * Math.cos(mainLineAngle);
        const R_label_y = cy + R_label_pos_r * Math.sin(mainLineAngle);
        ctx.fillText('R', R_label_x - 20, R_label_y - 5);

        // Add figure caption
        ctx.font = 'bold 22px "Times New Roman"';
        ctx.fillText('Fig. 2.52', cx - 40, cy + R_y + 40);

    </script>
</body>
</html>